<!--群发消息管理-->
<template>
    <div class="mass-text flex flex-direction height-100 position-relative">
        <header class="header-height flex justify-between">
            <div></div>
            <div>
                <el-button size="small" type="primary" @click="addMassDialogVis = true">新增</el-button>
                <!--                <el-button size="small" type="error">删除</el-button>-->
            </div>
        </header>
        <main class="flex-sub">
            <!--            <el-table>-->
            <!--                <el-table-column label="序号" type="index"/>-->
            <!--            </el-table>-->
        </main>
        <el-dialog
            :visible.sync="addMassDialogVis"
            title="发送群发"
            :close-on-click-modal="false"
            width="600px"
        >
            <header>
                <el-select
                    class="margin-right-xs"
                    v-model="sendType"
                    size="small"
                    style="width: 120px;"
                >
                    <el-option label="指定标签" value="tag"/>
                    <el-option label="指定用户" value="user"/>
                </el-select>
                <el-select
                    class="margin-right-xs"
                    size="small"
                    v-model="selectTag"
                    v-if="sendType === 'tag'"
                    style="width: 120px;"
                >
                    <el-option
                        v-for="item in tags"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
                <el-button
                    v-else
                    class="margin-right-xs"
                    size="small"
                    type="primary"
                    @click="userSelectVis = true"
                >选择用户
                </el-button>
                <el-input
                    v-model="material.mediaId"
                    placeholder="选择消息素材"
                    size="small"
                    style="width:300px;"
                    @focus="materDiaVis = true"
                />
                <!--                素材选择器-->
                <mater-select-dialog
                    :visible.sync="materDiaVis"
                    mater-type="all"
                    @selected="handlerMaterDiaSelected"
                />
                <!--                用户选择器-->
                <user-select-dialog
                    :is-sync.sync="userSelectVis"
                    :def-select-item="userList"
                    @selected="affirmCallback"
                />
            </header>
            <!--            中间内容预览-->
            <main class="padding-tb-xs flex"
                  style="height: 400px;">
                <!--                用户列表预览-->
                <div class="left-content flex-sub margin-right-xs flex flex-direction"
                     style="border:1px solid #efefef;overflow: auto;"
                >
                    <div class="flex-sub">
                        <div
                            class="text-center margin-xs fl"
                            v-for="item in userList"
                            :key="item.openid">
                            <el-avatar :src="item.headimgurl"/>
                            <div class="nickname">{{ item.nickname }}</div>
                        </div>
                    </div>
                    <div
                        class="text-bold text-right">
                        <span v-show="userList.length>10">...</span>
                        等共<span class="text-success">{{ userList.length }}</span>个用户
                    </div>
                </div>
                <!--                素材详情预览-->
                <div class="right-content position-relative"
                     style="width: 240px;border:1px solid #efefef;"
                >
                    <!--        选择图文素材-->
                    <div class="flex flex-direction" v-if="material.selectType === 'news'">
                        <div class="card-preview"
                             v-for="(article,k) in material.content.articles">
                            <div v-if="k === 0" style="position: relative;">
                                <el-image
                                    class="article-thumb"
                                    fit="contain"
                                    :src="article.thumbUrl"
                                    style="height: 124px"
                                />
                                <label class="padding-xs"
                                       style="
                                   display:block;
                                   position: absolute;
                                   bottom: 0;
                                   width: 100%;
                                   background-image: linear-gradient(rgba(245,245,245,.2),rgba(185,185,185,.6));
                                   color: #fff;"
                                >{{ article.title }}</label>
                            </div>
                            <div class="flex padding-xs" v-else style="border-bottom: 1px solid #efefef">
                                <label class="flex-sub" style="vertical-align: center;">{{ article.title }}</label>
                                <el-image
                                    class="article-thumb"
                                    v-if="article.thumbUrl"
                                    :src="article.thumbUrl"
                                    style="width: 40px"/>
                            </div>
                        </div>
                    </div>
                    <!--        选择图片素材-->
                    <el-image v-else-if="material.selectType === 'image'"
                              class="margin-xs"
                              lazy
                              :src="material.url"
                              fit="none"
                              style="border:1px solid #efefef;width: 100%;"
                    />
                    <!--        选择音频素材-->
                    <div v-else-if="material.selectType === 'voice'"
                    >
                        <i class="el-icon-bell"/>
                        <div class="card-preview-text">管理后台不支持预览</div>
                    </div>
                    <!--        选择视频素材-->
                    <div v-else-if="material.selectType === 'video'">
                        <i class="el-icon-video-camera"/>
                    </div>
                </div>
            </main>
            <template slot="footer">
                <el-button size="small" type="primary" @click="handlerMaterSendClick">发送</el-button>
                <el-button size="small" type="default">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import UserSelectDialog from "@/components/dialog/wx/userSelectDialog";
import MaterSelectDialog from "@/components/dialog/wx/materSelectDialog";
import {sendMassTextByOpenid, sendMassTextByTag} from "@/api/wx";

export default {
    name: "massText",
    components: {MaterSelectDialog, UserSelectDialog},
    data() {
        return {
            addMassDialogVis: false, // 群发配置弹窗
            userSelectVis: false,    // 用户选择器显示状态
            sendType: 'tag',         // 群发目标类型（tag:按标签群发，user:按用户列表群发）
            selectTag: '',           // 选中的标签
            userList: [],           // 接收消息的用户列表
            showUserList: false,    // 接收用户信息列表显示状态
            material: {},            // 群发消息的素材信息
            materDiaVis: false       // 素材选择器的显示状态
        }
    },
    computed: {
        ...mapState({
            tags: state => state.wxUserTags.tags
        }),
    },
    methods: {
        affirmCallback(data) {
            this.userList = data
            this.showUserList = true
        },
        handlerMaterDiaSelected(data) {
            console.log("data选中的素材信息", data)
            this.material = data
        },
        /**
         * 群发发送按钮点击事件
         */
        handlerMaterSendClick() {
            // 素材ID
            let materId = this.material.mediaId
            if (!materId) {
                this.$message.warning('请选择素材！')
                return
            }
            if (this.sendType === 'tag') {
                // 根据用户标签群发消息
                let tagId = this.selectTag
                if (!tagId) {
                    this.$message.warning("请选择用户标签")
                    return
                }
                let params = {
                    mediaId: this.material.mediaId,
                    tagId: tagId,
                    type: this.material.selectType
                }
                sendMassTextByTag(params)
                    .then(res => {
                        let data = res.data
                        if (data.code === 200) {
                            this.$message.success("发送成功")
                            this.addMassDialogVis = false
                        } else {
                            this.$message.warning('消息发送失败')
                            console.warn(data)
                        }
                    })
                    .catch(error => {
                        console.warn(error)
                        this.$message.warning('发送失败了')
                    })
            } else if (this.sendType === 'user') {
                let openidList = this.userList.map(item => {
                    return item.openid
                })
                if (!openidList.length) {
                    this.$message.warning('请选择目标用户')
                    return
                }
                if (openidList.length > 0 && openidList.length < 2) {
                    this.$message.warning('请选择至少两个目标用户')
                    return
                }
                // 将openids拼接成规则字符串
                let openids = openidList.join(',')
                // 根据openid集合群发消息
                sendMassTextByOpenid({mediaId: materId, openids: openids, type: this.material.selectType})
                    .then(res => {
                        let data = res.data
                        if (data.code === 200) {
                            this.$message.success('群发发送成功')
                            this.addMassDialogVis = false // 关闭群发弹窗
                        } else {
                            console.log(res)
                            this.$message.warning('群发失败')
                        }
                    })
                    .catch(error => {
                        console.log(error)
                        this.$message.warning('群发失败！')
                    })
            }
        }
    }
}
</script>

<style scoped lang="less">
.mass-text {

}
</style>